<script setup lang="ts">
  import { FileUploadConfig } from '../../../hooks/types'
  import CustomInput from '../../component-list/CustomInput.vue'
  import CustomSingleSelect from '../../component-list/CustomSingleSelect.vue'

  defineOptions({
    name: 'OrderCustomFormUploadSetting',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  // 绑定的值
  const value = defineModel<FileUploadConfig>('modelValue', { required: true })
</script>

<template>
  <div class="order-custom-form-upload-setting">
    <div class="setting-item file-upload">
      <div class="label">文件数量</div>
      <div class="value">
        <custom-input v-model="value.num" placeholder="请输入文件数量" @input="emits('change')" />
      </div>
    </div>
    <div class="setting-item file-upload">
      <div class="label">上传类型</div>
      <div class="value">
        <custom-single-select
          v-model="value.type"
          :options="[
            { label: '视频', value: 'video' },
            { label: '图片', value: 'picture' },
          ]"
          placeholder="请选择上传类型"
          @change="emits('change')"
        />
      </div>
    </div>
    <div class="setting-item">
      <div class="label">文件大小</div>
      <div class="value">
        <custom-input
          v-model="value.size"
          placeholder="请输入文件大小"
          :append-text="'MB'"
          @input="emits('change')"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-upload-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }
  }
</style>
